<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript" src='../vue/dist/vue-router.js'></script>
    <script type="text/javascript">
        //1：router-view中包含router-view
        //2：路由规则中存在子路由
        // 嵌套路由 子路由
        // ：to='{name:"路由名字"}'
        var Login = {
            template: `<div>
                我是login显示的内容，下面是子路由显示的内容
                <router-link :to="{name:'login.woman'}">女生</router-link>
                <router-link :to="{name:'login.man'}">男 生</router-link>
                <router-view></router-view>
            </div>`
        };
        var Register = {
            template: `<div>
            我是Register显示的内容，下面是子路由显示的内容
                <router-view></router-view>
            </div>`
        };
        var Woman = {
            template: `<div>
                女生登录
            </div>`
        };
        var Man = {
            template: `<div>
                男生登录
            </div>`
        }

        var router = new VueRouter({
            routes: [
                {   //保证 /login显示login组件
                    name:'login', path: '/login', component:Login,
                    //保证 /login/abc 显示abc
                    children: [
                        { name:'login.woman', path: 'woman', component:Woman },
                        { name:'login.man', path: 'man', component:Man }
                    ]
                },
                { name:'register', path: '/register', component:Register }
            ]
        });
        var App = {
            template: `<div>

                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'register'}">注册</router-link>
                <router-view></router-view>
            </div>`
        };

        new Vue({
            el: '#app',
            router: router,
            components: {
                app: App
            },
            template: '<app/>'
        })
    </script>
</body>
</html>